<!-- 调整分摊比例 -->
<template>
  <div class='change_proportion'>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
      <Row :gutter="16">
        <Col span="22">
        <FormItem label="成员角色：" prop="roleId">
          <Select v-model="formValidate.roleId" placeholder="请选择" @on-change="changeRole"
            class="cityConfigArea_moudle_select">
            <Option v-for="item in roleIdsAttrSort" :key="item.roleId" :value="item.roleId">
              {{ item.roleName }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
    </Form>
    <Row :gutter="16" type="flex" justify="space-between">
      <Col span="13" class="tips">
      <Icon type="md-alert" class="tips_icon" />
      提示：调整奖金分配时，该角色下每个成员的所占比例
      </Col>
      <Col span="4">
      <Button type="primary" @click="addOrEditBtn('add')" style="margin-left: 8px"
        :disabled="formValidate.roleId==''||tableData.length==0">新增比例</Button>
      </Col>
    </Row>
    <Table ref="TableHeight" :max-height="500" :columns="columns" :data="tableData" border>
      <template slot-scope="{ row }" slot="userName">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">{{
            item.userName ? item.userName : '-'
          }}</span>
      </template>
      <template slot-scope="{ row }" slot="workNo">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">{{
            item.workNo ? item.workNo : '-'
          }}</span>
      </template>
      <template slot-scope="{ row }" slot="roleName">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">{{
            item.roleName ? item.roleName : '-'
          }}</span>
      </template>
      <template slot-scope="{ row }" slot="bonusRatio">
        <span class="sp1" v-for="(item, indx) in row.bonusRatioList" :key="indx">{{
            item.bonusRatio ? item.bonusRatio : item.bonusRatio==0 ? '0' : '-'
          }}</span>
      </template>
    </Table>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">关闭</Button>
    </div>
    <Modal v-model="addOrEditModal" :title="addOrEditModalTitle"
      @on-cancel="addOrEditModalCancel" width="800px" :footerHide="true">
      <add-or-edit v-if="addOrEditModal" @onClose='addOrEditModalCancel'
        @onChangeTable='onSuccess' :operationType='operationType'
        :addOrEditData='addOrEditData' />
    </Modal>
  </div>
</template>

<script>
  import addOrEdit from './addOrEdit.vue'
  import teamsApi from '@/biz/buildingManagement/teams'
  export default {
    components: {
      addOrEdit,
    },
    data() {
      return {
        formValidate: {
          roleId: '',
        },
        ruleValidate: {
          roleId: [
          {
            required: true,
            message: '请选择成员角色',
            trigger: 'change',
            type: "number"
          }, ],
        },

        roleIdsAttrSort: [],
        buildingId: this.$dt.buildInfo().housesId,
        columns: [
        {
          title: '姓名',
          key: 'userName',
          minWidth: 100,
          align: 'center',
          slot: 'userName',
        },
        {
          title: '工号',
          key: 'workNo',
          minWidth: 100,
          align: 'center',
          slot: 'workNo',
        },
        {
          title: '案场角色',
          key: 'roleName',
          minWidth: 80,
          align: 'center',
          slot: 'roleName',
        },
        {
          title: '分摊比例（%）',
          key: 'bonusRatio',
          minWidth: 140,
          align: 'center',
          slot: 'bonusRatio',
        },
        {
          title: '生效日期',
          key: 'effectiveDate',
          minWidth: 100,
          align: 'center',
          slot: 'effectiveDate',
          render: (h, params) => {
            return h(
              'div',
              params.row.effectiveDate ?
              this.$tool.formatterDate(params.row.effectiveDate) :
              '-'
            )
          },
        },
        {
          title: '操作',
          key: 'operation',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  style: {
                    marginLeft: '10px',
                    // display: params.row._index == 0 ? 'block' : 'none',
                  },
                  on: {
                    click: (e) => {
                      e.stopPropagation()
                      this.addOrEditBtn('edit', params.row) //点击事件
                    },
                  },
                },
                '修改'
              ),
            ])
          },
        }, ],
        tableData: [],
        addOrEditModal: false,
        addOrEditModalTitle: '',
        addOrEditData: {},
        operationType: null,
      }
    },
    methods: {
      //获取所有参与分摊比例的前台角色
      getFrontRoleinit() {
        teamsApi.getFrontRoles({ rewardShareFlag: 1 }).then((res) => {
          this.roleIdsAttrSort = res
        })
      },
      changeRole(e) {
        this.formValidate.roleId = e
        this.getqryAllRatioLogs()
      },
      //查看比例记录编辑
      ratiologEdit(data) {
        this.changeRole(data)
      },
      //分摊比例查询
      getqryAllRatioLogs() {
        let params = {
          buildingId: this.buildingId,
          roleId: this.formValidate.roleId,
        }
        teamsApi.qryAllRatioLogs(params).then((res) => {
          this.tableData = res
        })
      },
      onSuccess() {
        this.getqryAllRatioLogs()
        this.$emit('onChangeTable')
      },
      addOrEditModalCancel() {
        this.addOrEditModal = false
      },
      handleClose() {
        this.$emit('onClose')
      },
      addOrEditBtn(type, obj) {
        if (type == 'add') {
          this.addOrEditModalTitle = '新增奖金分摊比例'
          let params = {
            buildingId: this.buildingId,
            roleId: this.formValidate.roleId,
          }
          teamsApi.addRatioInfoLogs(params).then((res) => {
            res.map((item) => {
              item.bonusRatio = 0
            })
            let objArr = []
            objArr.push({
              bonusRatioList: res,
              effectiveDate: null,
            })
            this.addOrEditData = objArr
            this.addOrEditModal = true
          })
          this.operationType = 1
        } else if (type == 'edit') {
          this.operationType = 2
          this.addOrEditModalTitle = '修改奖金分摊比例'
          obj.bonusRatioList.map((item) => {
            item.bonusRatio = item.bonusRatio - 0
          })
          let objArr = []
          objArr.push({
            bonusRatioList: obj.bonusRatioList,
            effectiveDate: obj.effectiveDate,
          })
          this.addOrEditData = objArr
          this.addOrEditModal = true
        }
      },
    },
    mounted() {
      this.getFrontRoleinit()
    },
  }
</script>
<style lang='scss' scoped>
  .change_proportion {
    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      margin-left: 20px;
      line-height: 32px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }
    }

    .btn-operate {
      margin-top: 20px;
    }

    .ivu-table-cell-slot {
      &>.sp1:last-child {
        border: none;
      }
    }

    .sp1 {
      display: block;
      min-height: 48px;
      line-height: 48px;
      text-align: center;
      border-bottom: 1px #e8eaec solid;
    }
  }
</style>